<template>
	<n-modal v-model:show="dialogStore.visible" @update:show="onClose">
		<div class="w-[365px] bg-bg-1 rounded flex flex-col py-4 px-5 text-t-1">
			<div class="absolute right-3 top-3 cursor-pointer">
				<base-icon name="close" size="24" @click="onClose" />
			</div>
			<div class="flex items-center">
				<base-icon
					v-if="icon"
					:name="options.icon || icon"
					size="24"
					:color="options.iconColor || iconColor"
					class="mr-2" />
				<base-text class="text-base" :text="options.title" :text-t="options.titleT" />
			</div>
			<div v-if="options.content || options.contentT" class="flex mt-[10px]">
				<base-icon
					v-if="options.contentIndent && icon"
					:name="options.icon || icon"
					size="24"
					:color="options.iconColor || iconColor"
					class="mr-2 invisible" />
				<base-text :text="options.content" :text-t="options.contentT" class="text-t-3 text-base" />
			</div>
			<div
				v-if="options.cancelShow || options.confirmShow"
				class="mt-[30px] flex justify-end gap-4">
				<base-button
					v-if="options.cancelShow"
					:text="options.cancelText"
					:text-t="options.cancelTextT || 'action.cancel'"
					:block="false"
					size="small"
					@click="onCancel" />
				<base-button
					v-if="options.confirmShow"
					:text="options.confirmText"
					:text-t="options.confirmTextT || 'action.confirm'"
					:block="false"
					size="small"
					:type="dialogStore.type === 'error' ? 'error' : 'primary'"
					@click="onConfirm" />
			</div>
		</div>
	</n-modal>
</template>

<script lang="ts" setup>
import BaseButton from '@/components/base/button/index.vue'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseText from '@/components/base/text/index.vue'
import { NModal } from 'naive-ui'
import { useDialogStore } from '@/store'
import { computed } from 'vue'

defineOptions({ name: 'BaseDialog' })

const dialogStore = useDialogStore()

const options = computed(() => dialogStore.options)

const onClose = () => {
	dialogStore.hide()
	options.value.closeFn && options.value.closeFn()
}

const onCancel = () => {
	onClose()
	options.value.cancelFn && options.value.cancelFn()
}

const onConfirm = () => {
	onClose()
	options.value.confirmFn && options.value.confirmFn()
}

const icon = computed(() => {
	switch (dialogStore.type) {
		case 'info':
			return 'abnormal'
		case 'success':
			return 'correct'
		case 'error':
			return 'mistake'
		case 'warning':
			return 'about'
		default:
			return ''
	}
})

const iconColor = computed(() => {
	switch (dialogStore.type) {
		case 'info':
			return 'var(--color-info)'
		case 'success':
			return 'var(--color-success)'
		case 'error':
			return 'var(--color-danger)'
		case 'warning':
			return 'var(--color-warning)'
		default:
			return ''
	}
})
</script>
